<template>
  <div class="wn-form">
    <div class="title">
      <h2>{{flowMenu[flowStep].tit}}</h2>
    </div>
    <form v-if="flowStep!=2">
      <div class="information" v-if="flowStep===0">
        <div class="input">
          <div class="inner">
            <label>
              <img src="../../assets/images/form_label_name.png" alt="label">
            </label>
            <input
              name="证件姓名"
              v-validate="'required'"
              type="text"
              placeholder="请输入身份证姓名"
              v-model="formData.name"
              @blur="verityNameFormat"
              @change="RTverityInfoName=''"
            >
          </div>
          <span
            v-if="errors.first('证件姓名')||RTverityInfoName"
            class="error-info"
          >{{ RTverityInfoName||errors.first('证件姓名') }}</span>
        </div>
        <div class="input">
          <div class="inner">
            <label>
              <img src="../../assets/images/form_label_phone.png" style="height:110%" alt="label">
            </label>
            <input
              name="手机号"
              id="inputPhone"
              v-validate="'required|digits:11'"
              type="tel"
              placeholder="请输入手机号"
              @blur="RTverity"
              v-model="formData.mobileNumber"
              @keypress="RTverityInfoPhone=''"
              @change="RTverityInfoPhone=''"
            >
            <div :class="['sender',senderAble?'':'disable']" @click="sendVerityCode">
              <span>{{getCodeCounter||senderInfo}}</span>
            </div>
          </div>
          <span
            v-if="errors.first('手机号')||RTverityInfoPhone"
            class="error-info"
          >{{ RTverityInfoPhone||errors.first('手机号') }}</span>
        </div>
        <div class="input">
          <div class="inner">
            <label>
              <img src="../../assets/images/form_label_key.png" alt="label">
            </label>
            <input
              name="验证码"
              v-validate="'required|numeric'"
              type="tel"
              placeholder="请输入验证码"
              v-model="verityCoder"
              @blur="RTverity"
              @keypress="RTverityInfoCoder=''"
              @change="RTverityInfoCoder=''"
            >
          </div>
          <!-- <span v-if="errors.first('验证码')" class="error-info">{{ errors.first('验证码') }}</span> -->
          <span
            v-if="errors.first('验证码')||RTverityInfoCoder"
            class="error-info"
          >{{ RTverityInfoCoder||errors.first('验证码') }}</span>
        </div>
        <div class="input" v-if="idComponent">
          <div class="inner">
            <label>
              <img src="../../assets/images/form_label_id.png" style="height:90%" alt="label">
            </label>
            <input
              name="证件号码"
              v-validate="'required:true|min:15'"
              type="text"
              placeholder="请输入身份证号码"
              v-model="formData.IDCard"
              @blur="RTverity"
              @keyup="verityidCardFormat"
              @change="RTverityInfoIDcard=''"
            >
          </div>
          <span
            v-if="errors.first('证件号码')||RTverityInfoIDcard"
            class="error-info"
          >{{ RTverityInfoIDcard||errors.first('证件号码') }}</span>
        </div>
      </div>
      <div class="identity" v-if="idComponent&&flowStep===0">
        <div class="upload">
          <div class="title">
            <span>请上传身份证照片</span>
          </div>
          <div class="items">
            <li
              @click="fileUpload('IDCardFrontUrl')"
              :style="{backgroundImage:'url('+formData.IDCardFrontUrl+')'}"
            >
              <input @change="fileRead" type="file" id="IDCardFrontUrl" style="display:none">
              <input
                type="text"
                v-model="formData.IDCardFrontUrl"
                name="身份证正面"
                style="display:none"
                v-validate="'required'"
              >
              <div :class="['desc',formData.IDCardFrontUrl?'':'act']">
                <span>正面</span>
              </div>
            </li>
            <li
              @click="fileUpload('IDCardBackUrl')"
              :style="{backgroundImage:'url('+formData.IDCardBackUrl+')'}"
            >
              <input @change="fileRead" type="file" id="IDCardBackUrl" style="display:none">
              <input
                type="text"
                v-model="formData.IDCardBackUrl"
                name="身份证背面"
                style="display:none"
                v-validate="'required'"
              >
              <div :class="['desc',formData.IDCardBackUrl?'':'act']">
                <span>反面</span>
              </div>
            </li>
          </div>
          <span v-if="errors.first('身份证正面')||errors.first('身份证背面')" class="error-info">身份证正面和背面都是必须的</span>
        </div>
      </div>
      <div class="location" v-if="flowStep===1">
        <div class="textarea">
          <label>
            <img src="../../assets/images/form_label_location.png" alt="label">
            <span @click="distPicker=true">
              {{pickerInfo||'请选择门店位置'}}
              <i>></i>
            </span>
          </label>
          <v-distpicker @selected="PickerOnSelected" type="mobile" v-if="distPicker"></v-distpicker>
          <input
            name="门店区域"
            v-model="formData.district"
            v-validate="'required'"
            style="display:none"
            type="text"
          >
          <!-- <div class="picker-info" v-if="pickerInfo">
            <span>{{pickerInfo}}</span>
          </div>-->
          <div class="area">
            <textarea
              cols="20"
              rows="3"
              name="门店地址"
              v-validate="'required'"
              @focus="placeH=false"
              @blur="placeH=true"
              v-model="formData.address"
            ></textarea>
            <div class="placeholder" v-if="placeH&&!formData.address">
              <h1>请输入门店详细地址</h1>
              <p>与营业执照登记的经营场所保持一致</p>
            </div>
          </div>
        </div>
        <span v-if="errors.first('门店区域')||errors.first('门店地址')" class="error-info">门店地址信息不完整</span>
      </div>
      <div class="license" v-if="flowStep===1">
        <div class="input">
          <input
            name="营业执照号"
            v-validate="'required|min:15'"
            type="text"
            placeholder="请输入营业执照号"
            v-model="formData.license"
            @blur="RTverity"
            @change="RTverityInfoLicense=''"
            @keyup="verityLisenceFormat"
          >
          <span
            v-if="errors.first('营业执照号')||RTverityInfoLicense"
            class="error-info"
          >{{ RTverityInfoLicense||errors.first('营业执照号') }}</span>
        </div>
        <div class="upload">
          <div class="items">
            <li
              @click="fileUpload('licenseImageUrl')"
              :style="{backgroundImage:'url('+formData.licenseImageUrl+')'}"
            >
              <input @change="fileRead" type="file" id="licenseImageUrl" style="display:none">
              <input
                type="text"
                v-model="formData.licenseImageUrl"
                v-validate="'required'"
                name="营业执照"
                style="display:none"
              >
              <div :class="['desc',formData.licenseImageUrl?'':'act']">
                <span>上传营业执照</span>
              </div>
            </li>
          </div>
          <span v-if="errors.first('营业执照')" class="error-info">营业执照正面是必须的</span>
        </div>
      </div>
    </form>
    <confirm v-if="flowStep===2" :formData="formData"/>
    <div class="formButton">
      <div :class="['submit',submitAble?'act':'']" @click="flowing">
        <span>{{flowMenu[flowStep].button}}</span>
      </div>
      <!-- <div v-if="flowStep===2" :class="['submit back',submitAble?'act':'']" @click="flowStep=0">
        <span>修改信息</span>
      </div>-->
      <div class="subInfo" v-if="flowStep===2">请确认您所填写的个人信息与上传的证件 资料相符，否则将不予开通会员权限。</div>
    </div>
    <div class="popup" v-show="popConfig.able">
      <div class="icon" v-if="popConfig.icon">
        <i v-show="popConfig.icon==='success'">
          <img src="../../assets/images/success.svg">
        </i>
        <i v-show="popConfig.icon==='wrong'">
          <img src="../../assets/images/wrong.svg">
        </i>
        <i v-show="popConfig.icon==='loading'">
          <img class="act" src="../../assets/images/loading.svg">
        </i>
      </div>
      <div class="desc">
        <span>{{popConfig.desc}}</span>
      </div>
    </div>
    <div class="popConfirm" v-show="popConfirm.able">
      <div class="pop-inner">
        <div class="content">
          <h4>温馨提示</h4>
          <p>{{popConfirm.info}}</p>
        </div>
        <div class="button" @click="popConfirm.able=false">确定</div>
      </div>
    </div>

    <div class="panel" v-if="flowStep<3">
      <div class="nav">
        <i :class="flowStep>=0?'act':''" @click="panelNav('back')"></i>
        <i :class="flowStep===0&&formData.licenseImageUrl?'act':''" @click="panelNav('go')"></i>
      </div>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";

import confirm from './confirm.vue'
import axios from "axios"
import store from '../../store.js'
export default {
  components: {
    confirm
  },
  data () {
    return {
      senderInfo: '获取验证码',
      verityCoder: '',
      senderAble: true,
      fLocationInfo: '',
      placeH: true,
      distPicker: false,
      pickerInfo: '',
      getCodeCounter: null,
      popConfig: {
        able: false,
        icon: 'success',
        desc: '操作成功'
      },
      popConfirm: {
        able: false,
        info: '姓名只能输入中文／英文'
      },
      formData: {
        name: '',
        mobileNumber: '',
        IDCard: '',
        IDCardFrontUrl: '',
        IDCardBackUrl: '',
        province: '',
        city: '',
        district: '',
        address: '',
        licenseImageUrl: '',
        license: ''
      },
      flowMenu: [
        {
          tit: '填写个人信息',
          button: '确认信息',
        },
        {
          tit: '上传门店信息',
          button: '下一步',
        },
        {
          tit: '请核对信息',
          button: '提交审核',
        },
        {
          tit: '正在审核',
          button: '嘻嘻嘻',
        }
      ],
      submitAble: true,
      flowStep: 0,
      RTverityInfoIDcard: '',
      RTverityInfoPhone: '',
      RTverityInfoCoder: '',
      RTverityInfoLicense: '',
      RTverityInfoName: '',
      fileTemp: '',
      idComponent: false,
      apiOrigin: 'http://ceodemo.hotkidclub.com:8290'//http://10.128.221.129:8280
    }
  },
  computed: {
    serveAPI: {
      get () {
        let serve = {};
        let portAddress = store.state.apiPort.map(
          e => store.state.apiOrigin + e.split(":")[1]
        );
        let portName = store.state.apiPort.map(e => e.split(":")[0]);
        for (let i = 0; i < portName.length; i++) {
          serve[portName[i]] = portAddress[i];
        }
        return serve;
      },
      set () { }
    },
  },
  methods: {

    //----------------------------------------------------
    // base config
    popup (state, desc, sec) {
      if (popTimer) clearTimeout(popTimer)
      this.popConfig.able = true
      this.popConfig.icon = state || 'success'
      this.popConfig.desc = desc || '操作正确'
      let popTimer = setTimeout(() => {
        this.popConfig.able = false
      }, sec * 1000 || 3000);
    },
    flowing () {
      console.log(this.flowStep)
      this.cleanState()
      if (this.flowStep === 0) this.verityCode()
      setTimeout(() => {
        this.$validator.validateAll().then(result => {
          if (result && !this.RTverityInfoIDcard && !this.RTverityInfoPhone && !this.RTverityInfoCoder && !this.RTverityInfoLicense && !this.RTverityInfoName) {
            if (this.flowStep === 2) {
              this.audit()
              return
            }
            if (this.flowStep < 3) {
              this.flowStep++
            }
            this.$emit('flowStep', this.flowStep)
          } else {
            // this.popup('wrong', '请检查错误项', 1)
            this.popConfirmSwitch()
          }
        })
      }, 500);
    },
    popConfirmSwitch () {
      this.popConfirm.able = true
      let dom = document.querySelector('.error-info')
      this.popConfirm.info = dom.textContent
      if (!this.formData.province && this.flowStep === 1) this.distPicker = true
    },
    validatorRule () {
      console.log('新增规则')
      this.$validator.extend('brown', {
        messages: {
          zh_CN: field => field + '必须是11位纯数字'
        },
        validate: value => {
          return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
        }
      })
    },
    cleanState () {
      window.scrollTo(0, 0);
      let inputList = [...document.querySelectorAll("input")];
      inputList.map(e => {
        e.blur();
      });
    },

    //----------------------------------------------------
    // file handle
    fileUpload (id) {
      document.querySelector('#' + id).click()
    },
    fileRead (e) {
      if (e.target.files[0].type.match('image')) {
        let reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])
        reader.onload = (read) => {
          // alert(read.target.result)
          this.formData[e.target.id] = read.target.result
        }
      } else {
        this.popup('wrong', '格式错误')
      }
      console.log(this.formData)
    },

    //----------------------------------------------------
    // picker
    PickerOnSelected (data) {
      this.distPicker = false
      this.pickerInfo = data.province.value + ' | ' + data.city.value + ' | ' + data.area.value
      // this.formData.location = this.pickerInfo
      this.formData.province = data.province.value
      this.formData.city = data.city.value
      this.formData.district = data.area.value
      console.log(data)
    },

    //----------------------------------------------------
    // senderVerityCode
    sendVerityCode () {
      if (!this.senderAble) return
      this.$validator.validate('手机号').then(result => { // step1.variety phonenumber
        // console.log(this.formData.mobileNumber)
        setTimeout(() => {
          if (result && !this.RTverityInfoPhone) { // setp2. axios post
            axios
              .post(this.serveAPI.getVerityCode, {
                mobileNumber: this.formData.mobileNumber
              })
              .then(response => {
                console.log(response)
                this.popup('success', '已发送', 1)
                this.getCodeCountTimer(60) //step3. counter start
              })
              .catch(error => {
                console.log(error);
                this.senderInfo = "获取失败,请稍后再试";
              });
          }
        }, 500);
      })
    },
    getCodeCountTimer (e) {
      if (e) this.getCodeCounter = 60
      this.senderAble = false
      if (this.getCodeCounter > 0) {
        this.getCodeCount()
      } else {
        this.getCodeCounter = null
        this.senderAble = true
      }
    },
    getCodeCount () {
      setTimeout(() => {
        this.getCodeCounter--
        this.getCodeCountTimer()
      }, 1000);
    },

    //----------------------------------------------------
    // verity
    RTverity (e) {
      this.$validator.validate(e.target.name).then(result => {
        if (result) {
          if (e.target.name === '手机号') this.verityPhone()
          if (e.target.name === '证件号码') this.verityidCard()
          if (e.target.name === '营业执照号') this.verityLisence()
          if (e.target.name === '验证码') {
            this.$validator.validate('手机号').then(result => {
              if (result) {
                this.verityCode()
              }
            })
          }
        }
      })
    },
    verityCode () {
      axios
        .get(this.serveAPI.verityCode + this.formData.mobileNumber + '/' + this.verityCoder)
        .then(response => {
          console.log(response)
          if (response.data.error) {
            this.RTverityInfoCoder = '验证码不匹配'
          } else {
            this.RTverityInfoCoder = ''
            console.log('验证码正确')
          }
        })
        .catch(error => { console.log(error) })
    },
    verityPhone () {
      this.$validator.validate('手机号').then(result => {
        if (result) {
          axios
            .get(this.serveAPI.verityPhone + this.formData.mobileNumber)
            .then(response => {
              console.log(response)
              if (response.data.error) {
                this.RTverityInfoPhone = response.data.error
              } else {
                console.log('手机号可用')
                // this.sendVerityCode()
              }
            })
            .catch(error => { console.log(error) })
        }
      })
    },
    verityidCard () {
      axios
        .get(this.serveAPI.verityIDcard + this.formData.IDCard)
        .then(response => {
          if (response.data.error) {
            this.RTverityInfoIDcard = '身份证已经被使用'
          } else {
            console.log('身份证可用')
          }
        })
        .catch(error => { console.log(error) })
    },
    verityLisence () {
      axios
        .get(this.serveAPI.verityLisence + this.formData.license)
        .then(response => {
          if (response.data.error) {
            console.log(response.data.error)
            this.RTverityInfoLicense = response.data.error
          } else {
            console.log('营业执照可用')
          }
        })
        .catch(error => { console.log(error) })
    },
    verityidCardFormat (e) {
      e = e.target.value
      let rule1 = /\d{17}[\d|x]/.test(e)
      let rule2 = /\d{15}/.test(e)
      let rule3 = /^.{15}$|^.{18}$/.test(e)
      console.log(rule1, rule2, rule3)
      if ((rule1 || rule2) && rule3) {
        this.RTverityInfoIDcard = ''
      } else {
        this.RTverityInfoIDcard = '身份证件格式不正确'
      }
    },
    verityLisenceFormat (e) {
      e = e.target.value
      let rule1 = /(^\w{15}$)|(^\w{18}$)/.test(e)
      if (rule1) {
        this.RTverityInfoLicense = ''
      } else {
        this.RTverityInfoLicense = '营业执照号码格式不正确'
      }
    },
    verityNameFormat (e) {
      e = e.target.value
      let rule1 = /^[\u4e00-\u9fa5]+$|^[a-zA-Z]+$/.test(e)
      let rule2 = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(e)
      if (rule1 && !rule2) {
        this.RTverityInfoName = ''
      } else {
        this.RTverityInfoName = '姓名只能输入中文／英文'
      }
    },
    //----------------------------------------------------
    // audit
    audit () {
      console.log('audit all data')
      this.popup('loading', '正在上传资料', 30)
      let overTime = setTimeout(() => {
        this.popup('wrong', '上传失败', 3)
      }, 30000);
      console.log(this.formData)
      axios
        .post(this.serveAPI.submitData, {
          // data: this.formData
          "name": this.formData.name,
          "mobileNumber": this.formData.mobileNumber,
          // "IDCard": this.formData.IDCard,
          // "IDCardFrontUrl": this.formData.IDCardFrontUrl,
          // "IDCardBackUrl": this.formData.IDCardBackUrl,
          "province": this.formData.province,
          "city": this.formData.city,
          "district": this.formData.district,
          "address": this.formData.address,
          "licenseImageUrl": this.formData.licenseImageUrl,
          "license": this.formData.license,
          "code": this.verityCoder,
          "posID": store.state.uid
        })
        .then(response => {
          console.log(response)
          if (overTime) clearTimeout(overTime)
          if (response.data.error) {
            console.log(response.data.error)
            this.popup('wrong', response.data.error)
          } else {
            this.flowStep = 3
            this.$emit('flowStep', this.flowStep)
          }
        })
        .catch(error => { console.log(error) })
    },
    //----------------------------------------------------
    // panel nav
    panelNav (e) {
      console.log(e, this.flowStep)
      if (e === 'go') {
        if (this.flowStep > 0) return
        if (!this.formData.license) return
        this.flowStep++
      } else {
        if (this.flowStep === 0) {
          store.commit('upload', { prope: 'flow', data: false })
          return
        }
        this.flowStep--
      }
    },
    //----------------------------------------------------
    // serve
    stemp () {
      // alert('开始签名')
      axios
        .post(this.serveAPI.wxSDK, {
          url: window.location.href
        })
        .then(res => {
          // alert(JSON.stringify(res))
          // this.configInfo = res.data.object;
          console.log(res);
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.object.appId, // 必填，公众号的唯一标识
            timestamp: res.data.object.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.object.noncestr, // 必填，生成签名的随机串
            signature: res.data.object.signature, // 必填，签名
            jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline", "chooseImage", "getLocalImgData"] // 必填，需要使用的JS接口列表
          });
          this.config();
        });
    },
    config () {
      // alert('开始配置')
      wx.ready(() => {
        let shareData = {
          title: "邀请好友",
          desc:
            "我已成为旺仔旺铺的CEO，只用一键分享旺旺食品就能轻松赚钱。想邀你一起成为CEO，边吃边赚。",
          link: window.location.href.split("?")[0] + "?calfKey=" + this.calfKey,
          imgUrl:
            window.location.href.split("?")[0] + "static/images/shareImg.jpg",
          type: "",
          dataUrl: "",
          success: function () { },
          cancel: function () { },
          fail: function () {
            alert("分享失败");
          }
        };

        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
        setTimeout(() => {
          wx.chooseImage({
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
              wx.getLocalImgData({
                localId: res.localIds[0],
                success: function (res) {
                  alert(JSON.stringify(res.localData))
                  let data = res.localData
                  if (data.match(/base/)) data = data.split(',')[1]
                  data = 'data:image/jgp;base64,' + data
                  alert(data)
                  this.formData.IDCardFrontUrl = data
                }
              });
            }
          })
        }, 1000);
      });
    }
  },
  mounted () {
    // this.stemp()
  }
}
</script>
<style lang='stylus' scoped>
@import '../../assets/styles/index.styl'
.wn-form {
  width 100%
  overflow hidden
  padding 10px
  box-sizing border-box
  .title {
    text-align center
    padding 10px 0
    h2 {
      font-size 18px
      color c3
    }
  }
  form {
    .input {
      border-bottom 1px solid rgba(0, 0, 0, 0.04)
      position relative
      .inner {
        position relative
        label {
          font-size 14px
          display inline-block
          height 16px
          position absolute
          left 5px
          top 50%
          transform translateY(-55%)
          img {
            vertical-align middle
            height 100%
            width auto
          }
        }
        input {
          outline 0
          border 0
          width 100%
          padding 20px 15px
          padding-left 35px
          font-size 16px
        }
        .sender {
          position absolute
          top 50%
          right 0
          transform translateY(-50%) scale(0.88)
          background c2
          padding 5px 15px
          border-radius 30px
          span {
            font-size 12px
            color #fff
          }
          &.disable {
            background #aaa
          }
        }
      }
    }
    .textarea {
      margin-bottom 5px
      label {
        position relative
        img {
          height 16px
          width auto
          display inline-block
          position absolute
          top 47%
          transform translateY(-50%)
        }
        span {
          margin-left 15px
          color c3
          white-space nowrap
          max-width 200px
          i {
            display inline-block
            transform scaleY(1.5) scaleX(0.9)
            opacity 0.5
            position relative
            top -1px
          }
        }
      }
      .picker-info {
        color c3
        padding-top 5px
      }
      .area {
        margin-top 15px
        position relative
        background c4
        color c5
        border-radius 3px
        textarea {
          color c2
          position relative
          z-index 1
          box-sizing border-box
          background transparent
          width 100%
          padding 15px
          font-size 16px
        }
        .placeholder {
          z-index 0
          top 15px
          left 15px
          position absolute
          & h1 {
            font-size 16px
            font-weight normal
            margin-bottom 2px
          }
          & p {
            font-size 12px
            opacity 0.7
          }
        }
      }
    }
    .upload {
      margin 15px 0
      .title {
        font-size 16px
        color c3
        text-align left
      }
      .items {
        padding 15px 0
        li {
          display inline-block
          background #ffebee
          padding 15px 0 40px
          min-height 10px
          width 48%
          text-align center
          margin-right 4%
          border-radius 3px
          background-size cover
          background-position center
          background-repeat no-repeat
          &:last-child {
            margin-right 0
          }
          .desc {
            color #ffa7b3
            background-image url('../../assets/images/form_label_add.svg')
            background-size contain
            background-repeat no-repeat
            height 25px
            width 25px
            display inline-block
            opacity 0
            &.act {
              opacity 1
            }
            span {
              display inline-block
              position relative
              bottom -30px
              font-size 12px
            }
          }
        }
      }
    }
    .license {
      margin-top 25px
      .input {
        border 0
        width 100%
        position relative
        input {
          background c4
          border-radius 30px
          width 100%
          display inline-block
          padding 15px
          box-sizing border-box
          font-size 14px
          color c2
          margin-bottom 5px
          &::-webkit-input-placeholder {
            color c5
          }
        }
      }
      .upload {
        margin-top 0
        margin-bottom 35px
        .items {
          padding 15px 0 0
        }
        li {
          width 100%
          padding 58px 0 82px
          & span {
            position relative
            left 50%
            transform translateX(-50%)
            white-space nowrap
          }
        }
      }
    }
    .location {
      margin-top 15px
    }
    .error-info {
      display block
      font-size 12px
      color c5
      padding 3px 0 5px
    }
  }
  .formButton {
    margin-top 30px
    .submit {
      position relative
      text-align center
      padding 15px
      border-radius 50px
      color #fff
      &:before, &:after {
        content ''
        display inline-block
        position absolute
        top 0
        bottom 0
        left 0
        right 0
        background linear-gradient(45deg, #ff5d51, #ff893a)
        background #ccc
        z-index 1
        border-radius 3px
        border-radius 50px
        transition transform 0.3s ease
      }
      &:after {
        z-index 0
        background #da271a
        filter blur(5px)
        transform-origin center bottom
        transform scaleX(0.9) scaleY(0.9)
        transform scaleX(0.9) scaleY(0.5)
        opacity 0.8
        opacity 0
      }
      span {
        position relative
        z-index 2
        padding 15px
      }
      &.act {
        &:before {
          background linear-gradient(45deg, #ff5d51, #ff893a)
        }
        &:after {
          opacity 0.8
          transform scaleX(0.9) scaleY(0.9)
        }
      }
      &.back {
        margin-top 15px
        border 1px solid c6
        color c6
        &:before, &:after {
          display none
        }
      }
    }
    .subInfo {
      margin-top 15px
      font-size 12px
      color c3
      opacity 0.7
    }
  }
  .popup {
    position fixed
    @media only screen and (min-height: 1000px) {
      position absolute
    }
    z-index 99
    top 40%
    left 50%
    transform translate(-50%, -50%)
    background rgba(0, 0, 0, 0.5)
    padding 30px 20px
    border-radius 3px
    color #fff
    min-width 90px
    text-align center
    .icon {
      text-align center
      i {
        height 48px
        display inline-block
        margin-bottom 15px
        img {
          height 100%
          width auto
          &.act {
            animation rotate 1s ease infinite
          }
        }
      }
    }
    .desc {
      font-size 14px
    }
  }
  .popConfirm {
    position fixed
    @media only screen and (min-height: 1000px) {
      position absolute
    }
    z-index 9999
    top 0
    left 0
    bottom 0
    right 0
    background rgba(0, 0, 0, 0.5)
    padding 30px 20px
    border-radius 3px
    color #fff
    min-width 90px
    text-align center
    .pop-inner {
      position absolute
      background #fff
      top 45%
      left 50%
      transform translate(-50%, -50%)
      width 60vw
      padding 20px
      border-radius 5px
      .content {
        margin-bottom 25px
        color c8
        h4 {
        }
        p {
          margin 15px 0
        }
      }
      .button {
        background c2
        border-radius 5px
        padding 10px 15px
        font-size 14px
      }
    }
  }
  .panel {
    background #fafafc
    border-top 1px solid #e8e8ea
    position fixed
    left 0
    bottom 0
    height 10%
    max-height 70px
    width 100%
    z-index 999
    text-align center
    .nav {
      display inline-block
      position relative
      width 30%
      top 40%
      transform translateY(-50%)
      overflow hidden
      i {
        display inline-block
        height 24px
        width 24px
        background-image url('../../assets/images/arrow.svg')
        background-size contain
        background-repeat no-repeat
        background-position center
        content ''
        float left
        opacity 0.2
        cursor pointer
        &:last-child {
          float right
          transform rotate(180deg)
        }
        &.act {
          opacity 1
        }
      }
    }
  }
}
@keyframes rotate {
  from {
    transform rotate(0deg)
  }
  to {
    transform rotate(360deg)
  }
}
</style>
